<template>
  <div class="earth" id="earth"></div>
</template>
<script type="text/javascript">
import axios from "@/utils/axios";
import $ from "jquery";
export default {
  data() {
    return {
      oneChart: null
    };
  },
  // 钩子函数 生命周期。在组件创建好之后执行的函数
  created() {},
  // 钩子函数，结点渲染完毕之后执行的函数
  mounted() {
    this.earth();
    window.onresize = this.resize;
  },
  methods: {
    resize() {
      if (this.oneChart) {
        this.oneChart.resize();
      }
    },
    earth() {
      var ROOT_PATH = "https://echarts.apache.org/examples";
      var myChart = echarts.init(document.getElementById("earth"));
      this.oneChart = myChart;
      var option = {
        backgroundColor: "#000",
        globe: {
          baseTexture: "./world.topo.bathy.200401.jpg",
          heightTexture: "./world.topo.bathy.200401.jpg",
          displacementScale: 0.04,
          shading: "realistic",
          environment: "./starfield.jpg",
          realisticMaterial: {
            roughness: 0.9
          },
          postEffect: {
            enable: true
          },
          light: {
            main: {
              intensity: 5,
              shadow: true
            },
            ambientCubemap: {
              texture: "./pisa.hdr",
              diffuseIntensity: 0.2
            }
          }
        }
      };

      myChart.setOption(option);
    }
  }
};
</script>
<style scope>
.earth {
  height: calc(100vh - 50px);
  background-color: #23262f;
}
</style>